<template>
	<!-- 综合分析 -->
	<view class="p-10">
		<view class="card">
			<uni-section type="line" class="mb-10" title="隐患专业雷达图">
				<view class="flex s-center m-center">
					<uni-datetime-picker v-model="dateValue" type="daterange" @change="dateChange" />
				</view>
				<view class="charts-box">
					<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
				</view>
			</uni-section>
		</view>
		<view class="card">
			<uni-section type="line" class="mb-10" title="风险·隐患·三违分布统计">
				<view class="flex s-center m-center">
					<uni-datetime-picker v-model="dateValue1" type="daterange" @change="dateChange1" />
				</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" ontouch />
				</view>
			</uni-section>
		</view>
	</view>
</template>
<script setup>
import { ref, watch } from 'vue';
import { radarChart, riskHiddenDangerThreeViolateChart } from '@/api/hidden-danger.js';
import date from '@/utils/date.js';
const baseOpts = {
	color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
	padding: [20, 0, 0, 0],
	dataLabel: false,
	fontSize: 10
};
let chartData = ref({}),
	chartData1 = ref({}),
	dateValue = ref([
		date(new Date(), 'YYYY-MM-DD', {
			Y: -1
		}),
		date(new Date(), 'YYYY-MM-DD')
	]),
	dateValue1 = ref([
		date(new Date(), 'YYYY-MM-DD', {
			Y: -1
		}),
		date(new Date(), 'YYYY-MM-DD')
	]);
const opts = {
	legend: {
		show: false
	},
	extra: {
		radar: {
			radius: 100,
			gridType: 'circle',
			gridColor: '#CCCCCC',
			gridEval: 4,
			opacity: 0.2,
			max: 10,
			labelShow: true,
			border: true
		}
	},
	...baseOpts
};
const opts1 = {
	legend: {
		show: true
	},
	extra: {
		column: {
			type: 'group',
			width: 10
		}
	},
	enableScroll: true,
	xAxis: {
		rotateLabel: true,
		rotateAngle: 30,
		itemCount: 5,
		format: 'text'
	},
	...baseOpts
};
// 隐患专业
const getData = async (params) => {
	try {
		const { data } = await radarChart(params);
		let res = {
			categories: data.name,
			series: [
				{
					name: '',
					data: data.value
				}
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
	} catch (e) {
		//TODO handle the exception
	}
};
// 风险、隐患、三违分布
const getData1 = async (params) => {
	try {
		const { data } = await riskHiddenDangerThreeViolateChart(params);
		let res = {
			categories: data.names,
			series: [
				{
					name: '风险',
					data: data.risk
				},
				{
					name: '隐含',
					data: data.hidden
				},
				{
					name: '三违',
					data: data.volition
				}
			]
		};
		chartData1.value = JSON.parse(JSON.stringify(res));
	} catch (e) {
		//TODO handle the exception
	}
};
watch(
	() => dateValue.value,
	(val) => {
		console.log(val);
		getData({
			startTime: val[0],
			endTime: val[1]
		});
	},
	{
		immediate: true
	}
);
watch(
	() => dateValue1.value,
	(val) => {
		console.log(val);
		getData1({
			startTime: val[0],
			endTime: val[1]
		});
	},
	{
		immediate: true
	}
);
</script>
<style lang="scss" scoped>
:deep(.u-radio-group--row) {
	justify-content: center;
}
</style>
